<template>
    <div>
        <!-- 你的用户管理内容 -->
        <div class="container">
            <el-container style="height: 100%; width: 100%;">
                <el-main style="width: 100%; box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 1)">
                    <el-row>
                        <el-col :span="3" style="width: 100px; height: 50px;"></el-col>
                        <el-col :span="21" style="height: 80px;">
                            <div>
                                <h1 style="font-size: 40px; font-family: '隶书';">用户个人信息</h1>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row style="height: 260px;">
                        <el-col :span="3" style="width: 100px; height: 244px;"></el-col>
                        <el-col :span="5">
                            <div style="height: 244px; width: 200px; box-shadow: 0 5px 5px 0 rgba(1, 1, 1, 1)">
                                <img src="@/assets/M6So3XdliBXD2o2.jpg" alt="图片描述" style="width: 100%; height: 100%;">
                            </div>
                        </el-col>
                        <el-col :span="16">
                            <el-descriptions class="margin-top" title="用户信息" :column="1" :size="size">
                                <template slot="extra">
                                    <el-button type="primary" size="small" @click="showDialog">修改个人信息</el-button>
                                </template>
                                <el-descriptions-item label="用户名">{{ userInfo.name }}</el-descriptions-item>
                                <el-descriptions-item label="手机号">{{ userInfo.phone }}</el-descriptions-item>
                                <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
                                <el-descriptions-item label="备注">
                                    <el-tag size="small">学校</el-tag>
                                </el-descriptions-item>
                                <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
                            </el-descriptions>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="3" style="width: 100px; height: 100px;"></el-col>
                        <el-col :span="21">
                            <el-descriptions class="margin-top" :column="2" :size="size">
                                <el-descriptions-item label="信誉程度">良好</el-descriptions-item>
                                <el-descriptions-item label="VIP等级">18100000000</el-descriptions-item>
                                <el-descriptions-item label="个人简述">石头缝里蹦出来的，闹过天宫，下过地府，抢过龙宫</el-descriptions-item>
                            </el-descriptions>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24" style="height: 300px;">
                            <el-tabs type="border-card" style="height: 300px;">
                                <el-tab-pane>
                                    <span slot="label"><i class="el-icon-date"></i> 我的账户</span>
                                    <el-row>
                                        <el-col :span="4">
                                            <el-card class="box-card" style="height: 200px; width: 200px;">
                                                <div slot="header" class="clearfix">
                                                    <span>账户1</span>
                                                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                                                </div>
                                                <div v-for="o in 3" :key="o" class="text item">
                                                    {{ '列表内容 ' + o }}
                                                </div>
                                            </el-card>
                                        </el-col>
                                        <el-col :span="4">
                                            <el-card class="box-card" style="height: 200px; width: 200px;">
                                                <div slot="header" class="clearfix">
                                                    <span>账户1</span>
                                                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                                                </div>
                                                <div v-for="o in 3" :key="o" class="text item">
                                                    {{ '列表内容 ' + o }}
                                                </div>
                                            </el-card>
                                        </el-col>
                                        <el-col :span="4">
                                            <el-card class="box-card" style="height: 200px; width: 200px;">
                                                <div slot="header" class="clearfix">
                                                    <span>账户1</span>
                                                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                                                </div>
                                                <div v-for="o in 3" :key="o" class="text item">
                                                    {{ '列表内容 ' + o }}
                                                </div>
                                            </el-card>
                                        </el-col>
                                        <el-col :span="4">
                                            <el-card class="box-card" style="height: 200px; width: 200px;">
                                                <div slot="header" class="clearfix">
                                                    <span>账户1</span>
                                                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                                                </div>
                                                <div v-for="o in 3" :key="o" class="text item">
                                                    {{ '列表内容 ' + o }}
                                                </div>
                                            </el-card>
                                        </el-col>
                                        <el-col :span="4">
                                            <el-card class="box-card" style="height: 200px; width: 200px;">
                                                <div slot="header" class="clearfix">
                                                    <span>账户1</span>
                                                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                                                </div>
                                                <div v-for="o in 3" :key="o" class="text item">
                                                    {{ '列表内容 ' + o }}
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>
                                </el-tab-pane>
                                <el-tab-pane label="消息中心">消息中心</el-tab-pane>
                                <el-tab-pane label="角色管理">角色管理</el-tab-pane>
                            </el-tabs>
                        </el-col>
                    </el-row>
                </el-main>
            </el-container>
        </div>

        <!-- 对话框 -->
        <el-dialog ref="formDialog" title="编辑用户" :visible.sync="dialogVisible1" width="30%">
            <el-form ref="form" :model="formData" label-width="80px">
                <el-form-item label="用户id">
                    <el-input v-model="formData.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="formData.password" type="password"></el-input>
                </el-form-item>
                <el-form-item label="用户联系方式">
                    <el-input v-model="formData.phone"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button @click="dialogVisible1 = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>


<script>
import axiosInstance from '@/router/axiosInstance';
export default {
    data() {
        return {
            dialogVisible1: false,
            size: '',
            activeIndex: '1',
            tableData: [],
            userInfo: {
                id: '',
                name: '',
                phone: '',
                password: ''
            },
            formData: {}
        };
    },
    mounted() {
        this.fetchData();
    },
    methods: {
        // 查询方法
        fetchData() {
            axiosInstance.post('http://localhost:8080/api/user/current')
                .then(response => {
                    console.log('获取到的数据:', response.data);
                    const jsonObject = response.data;
                    this.userInfo = JSON.parse(jsonObject.sub);
                })
                .catch(error => {
                    console.error("获取数据失败:", error);
                });
        },
        handleSelect(index) {
            this.activeIndex = index;
        },
        showDialog() {
            this.dialogVisible1 = true;
            this.formData = { ...this.userInfo }; // 初始化表单数据
        },
        handleEdit() {
            axiosInstance.put('http://localhost:8080/api/user/updateById', this.formData)
                .then(response => {
                    console.log('更新成功:', response.data);
                    this.dialogVisible1 = false;
                    this.fetchData();
                })
                .catch(error => {
                    console.error('更新失败:', error);
                });
        },
        submitForm() {
            this.handleEdit();
        }
    }
}

</script>


<style scoped>
.text {
    font-size: 14px;
}
.item {
    margin-bottom: 18px;
}
.el-row {
    margin-bottom: 20px;
}
.el-col {
    border-radius: 4px;
}
.bg-purple-dark {
    background: #99a9bf;
}
.bg-purple {
    background: #d3dce6;
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.row-bg {
    padding: 10px 0;
}
.el-descriptions {
    font-size: large;
    background-color: rgba(255, 255, 255, 0.5) !important;
}

/* 确保对话框样式优先级 */
.el-dialog {
    z-index: 1000 !important;
}
</style>
